<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
		 <title>HTML5-pre,code标记</title>
   <style type="text/css">
            pre {
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>
        <main role="main">
		
		    <h1>这里显示一段javascript代码</h1>
            <pre>
                <code class="language-javascript">
				var myStr = "Hello world!";
				var myInt = 1;

				if (myInt == 1) {
				alert(myStr);
				}
                </code>
            </pre>
            <p>javascript是网页开发的必备语言，今后会学到的。</p>
		
		<h1>四喜丸子做法</h1>
        <ol start="1" type="1">
            <li>把猪肉剁碎</li>
            <li>放入盆中，和鸡蛋搅拌5分钟</li>
            <li>团成肉团</li>
            <li>下油锅炸3分钟</li>
            <li>出油锅，放置1小时</li>
            <li>蒸锅蒸15分钟</li>
            <li>完成</li>
        </ol>
        
        <h1>我喜欢的书籍</h1>
        <ul>
            <li>HTML5精通入门</li>
            <li>Web开发10日通</li>
            <li>PHP开发大全</li>
            <li>iPhone手机开发概要</li>
        </ul>
        
        <h1>我的成绩表</h1>
        <ol>
            <li value="1">语文:90</li>
            <li value="2">数学:85</li>
            <li value="3">英语:95</li>
        </ol>
		
        <article>
				<header>
						<nav>
							<h1>主菜单</h1>
							<ul>
								<li>主页</li>
								<li>新闻</li>
								<li>军事</li>
								<li>游戏</li>
							</ul>
						</nav>
		
                    <section>
                        <h1>沪指涨1.97%收复3000点 题材股爆发</h1>
                        <p>发表时间：2016-01-14 15:02:36</p>
						<blockquote cite="urn:isbn:1234567890">
						<p>引用内容自然段1...</p>
						<p>引用内容自然段2...</p>
						<p>引用内容自然段3...</p>
						</blockquote>	
                    </section>
            
                    <h1>美股大跌之后 基本面投资者蠢蠢欲动</h1>
                </header>
                <p>资本市场的波动是一群观点迥异投资者之间的博弈的体现，最近两周美股出现四年多来最大跌幅，对于不少投资者来说，心中充满恐慌情绪，但对于另外一部分投资者，他们兴奋的看到“抄底”的好机会越来越近了。</p>
                <figure>
                    <img src="img/sp500.jpg">
                    <figcaption>美国标普500指数最近两周放量重搓8.13%，录得2011年11月来最大两周跌幅</figcaption>
                </figure>
                
                <p>不过，美国当前多数经济指标运行良好，还远远谈不上“衰退”，股市的回撤可能使多年来紧盯美联储政策的市场，重新审视基本面，这对于只关心经济和公司财务数据的价值投资者来说尤其是个好消息。</p>
                
                <p>...</p>
				
				 <section>
                    <h2>最新行情</h2>
                    <p>
                        <img src="http://img1.money.126.net/chart/hs/time/540x360/0000001.png" alt="上证指数">
                    </p>
									
                </section>
				
				<footer>
                    <p>出处：网页新闻</p>
                    <p>原文：http://money.163.com/16/0114/15/BDA3F8U600254TFQ.html</p>
					  <address>
						如果你想什么问题，请与我联系。(<a href="mailto:aaa@aaa.com">给我发邮件</a>)
						</address>
                </footer>
        </article>
    </main>
    </body>
</html>